<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body{
			-webkit-user-select: none;
			 -moz-user-select: none;
		}
		.kaishi {
			display: flex;
			height: 50px;
			margin: 0 auto;
			position: absolute;
			background-color: red;
			z-index:3;
		}

		.jieshu {
			display: flex;
			width: 200px;
			height: 50px;
			margin: 0 auto;
			position: absolute;
			background-color:bisque;
			z-index:3;
		}

		.huakuai {
			width: 30px;
			height: 50px;
			display: flex;
			margin: 0 auto;
			position: absolute;
			background-color: aqua;
			z-index:6;
		}
		p{
			display: none;
			position:absolute;
			z-index: 5;
		}
	</style>
	<body>
		<div class="jieshu"></div>
		<div class="kaishi"></div>
		<p id="a1" οndragstart="return false">请拖动滑块</p><p id="a2" οndragstart="return false">验证成功</p>
		<div class="huakuai"></div>
		<script>
			var $ = function(name) {
				return document.querySelector(name);
			};
			var a = $(".jieshu");
			var c = $(".huakuai");
			var d = $(".kaishi");
			var a1= $("#a1");
			var a2= $("#a2");
			var cx = a.getBoundingClientRect().left;
			zongkuangdu = a.offsetWidth -c.offsetWidth;
			 c.onmousedown=function(e) {
			 	document.onmousemove=function(e){
					x=e.clientX;
					tx=x+cx;
					if(tx>cx+170){
						tx=cx+170;
					};
					c.style.left=tx+"px";
					d.style.width=tx+"px";
					d.style.zIndex=5;
					console.log(parseInt(d.style.width));
					a1.style.display="flex";
					if(parseInt(d.style.width)==178){
						a1.style.display="none";
						a2.style.display="flex";
						setInterval(function(){
							document.onmouseup=function(){
							 	c.style.left=cx+"px";
								document.onmousemove = null;
											d.style.width="200px";
											d.style.zIndex=2;
											a1.style.display="none";
											a2.style.display="none";
							}
						},2000);
						
					}
			 	};
			 };
			

		</script>
	</body>
</html>
